<template>
<div class="orderreturn-detail-main">

    <el-card class="card">
        <div slot="header">
            <!-- 进度条 -->
            <el-steps :active="act">
                <el-step v-for="item in steps" :key="item.id" :title="item.name">{{item.name}}</el-step>
            </el-steps>
        </div>
        <!-- 内容区 -->
        <div class="content" style="margin-top:20px;">
            <el-card>
                <div slot="header">
                    <el-button type="success">1、退单详细信息</el-button>
                </div>
                <div>
                    <el-row :gutter="0">
                        <el-col :span="6">
                            <div class="grid-content title">
                                订单编号
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.orderSn}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">用户账号</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.memberUsername}}</div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row :gutter="0">
                        <el-col :span="6">
                            <div class="grid-content title">
                                退单原因
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-tag type="danger" v-if="order.reason">{{order.reason}}</el-tag>
                                <el-tag type="danger" v-else>七天无理由退换</el-tag>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">处理状态</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-tag type="info" v-if="order.status===0" effect="dark">待处理</el-tag>
                                <el-tag type="warning" v-else-if="order.status===1" effect="dark">退货中</el-tag>
                                <el-tag type="success" v-else-if="order.status===2" effect="dark">已完成</el-tag>
                                <el-tag type="danger" v-else effect="dark">已拒绝</el-tag>
                            </div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row :gutter="0">
                        <el-col :span="6">
                            <div class="grid-content title">
                                订单编号
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.createTime}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">处理时间</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.handleTime}}</div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <!-- 商家同意退货 -->
                       <el-row :gutter="0" v-if="act===1">
                        <el-col :span="6">
                            <div class="grid-content title">
                                商家备注
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-tag type="success" v-if="order.receiveNote">{{order.receiveNote}}</el-tag>
                                <el-tag type="success" v-else>商家无备注哦</el-tag>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">接收人</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.receiveMan}}</div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <!-- 接收时间商家收到货的时候 -->
                    <el-row :gutter="0" v-if="act===2">
                        <el-col :span="6">
                            <div class="grid-content title">
                                商家备注
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-tag type="success" v-if="order.handleNote">{{order.handleNote}}</el-tag>
                                <el-tag type="success" v-else>商家无备注哦</el-tag>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">接收人</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.handleMan}}</div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-card>

            <!-- 用户信息 -->
            <el-card style="margin-top:20px;">
                <div slot="header">
                    <el-button type="danger">2、用户信息</el-button>
                </div>
                <div>
                    <el-row :gutter="0">
                        <el-col :span="6">
                            <div class="grid-content title">
                                用户名
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">
                                <el-tag type="success">{{order.returnName}}</el-tag>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content title">用户电话</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content">{{order.returnPhone}}</div>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-card>
            <!-- 商品信息 -->
            <el-card style="margin-top:20px;">
                <div slot="header">
                    <el-button type="primary">3、商品信息</el-button>
                </div>
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-row :gutter="10">
                            <el-col :span="10">
                                <el-form-item label="商品名称">
                                    {{order.productName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="商品品牌">
                                    {{order.productBrand}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品属性">
                                    <!-- {{order.productAttr}} -->
                                    <div v-for="item in order.productAttr" :key="item.key">
                                        {{item.key}} {{item.value}}
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="10">
                                <el-form-item label="商品图片">
                                    <img :src="order.productPic" alt="sorry" style="width:90px;height:90px;">
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="商品价格">
                                    {{order.productPrice}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品数量">
                                    {{order.productCount}}
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
            </el-card>

            <!-- 同意退货 -->
            <el-card style="margin-top:20px;" v-show="act===1">
                <div slot="header">
                    <el-button type="danger">4、填写退货信息</el-button>
                </div>
                <div>
                    <el-form ref="agreeOrderBack" :model="agreeOrderBack" label-width="80px" :rules="orderBackRules">
                        <el-row :gutter="10">
                            <el-col :span="8">
                                <el-form-item label="退货人" prop="handleMan">
                                    <el-input v-model="agreeOrderBack.handleMan" placeholder="请输入退货人姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="处理备注">
                                    <el-input v-model="agreeOrderBack.handleNote" placeholder="请输入备注"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" v-if="isReject">
                                <el-form-item label="退款金额" prop="returnAmount">
                                    <el-input v-model="agreeOrderBack.returnAmount" placeholder="请输入退款金额"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="12" style="text-align:right;">
                                <el-button type="primary" @click="agree">同意退货</el-button>
                            </el-col>
                            <el-col :span="12" style="text-align:left;">
                                <el-button type="primary" @click="reject">拒绝退货</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>

            <!-- 收到退货 -->
            <el-card v-show="act===2">
                <div slot="header"></div>
                <div>
                    <el-form ref="receiveGoods" :model="receiveGoods" label-width="80px" :rules="receiveRules">
                        <el-row :gutter="10">
                            <el-col :span="10">
                                <el-form-item label="接收人" prop="receiveMan">
                                    <el-input v-model="receiveGoods.receiveMan" placeholder="请输入商品接收人"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="接收备注">
                                    <el-input v-model="receiveGoods.receiveNote" placeholder="请输入备注"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-row :gutter="10">
                        <el-col :span="24" style="text-align:center;">
                            <el-button type="primary" @click="confirmReceiveGoods">确认收货</el-button>

                        </el-col>
                    </el-row>
                </div>
            </el-card>

        </div>
    </el-card>
</div>
</template>

<script>
import {
    orderReturn,
    rejectApply,
    receiveProduct,
    agreeApply
} from '@/api/order/orderreturn/index'

export default {
    components: {

    },
    data() {
        return {
            id: '',

            // 步骤条
            act: 1,
            steps: [{
                    name: '待处理',
                    id: 0
                },
                {
                    name: '退货中',
                    id: 1
                },
                {
                    name: '已完成',
                    id: 2
                },
                {
                    name: '已拒绝',
                    id: 3
                }

            ],
            order: {},
            form: {},

            // 提交的退货信息
            agreeOrderBack: {
                handleMan: '',
                handleNote: '',
                returnAmount: ''
            },

            // 验证退货
            orderBackRules: {
                handleMan: [{
                    required: true,
                    message: '请输入退款人名称',
                    trigger: 'blur'
                }, ],

            },
            receiveRules: {
                receiveMan: [{
                    required: true,
                    message: '请输入您的名称',
                    trigger: 'blur'
                }, ],
            },

            // 是否同意
            isReject: true,
            // 确认收货
            receiveGoods: {
                receiveMan: '',
                receiveNote: ''
            }

        };
    },
    computed: {

    },
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.init()
        }

    },
    mounted() {

    },
    methods: {
        init() {
            orderReturn(this.id).then(res => {
                console.log(res);
                if (res.success) {
                    this.act = res.data.orderReturnApply.status + 1

                    res.data.orderReturnApply.productAttr = JSON.parse(res.data.orderReturnApply.productAttr)
                    this.order = res.data.orderReturnApply

                    // 默认的退货价格
                    this.agreeOrderBack.returnAmount = res.data.orderReturnApply.productPrice

                }
            })

        },
        agree() {
            this.isReject = true
            let data = {}
            data = this.agreeOrderBack
            data.id = this.order.id
            this.$refs.agreeOrderBack.validate((valid) => {
                if (valid) {

                    agreeApply(this.order.id, data).then(res => {
                        console.log(res);
                        if (res.success) {
                            this.$message.success('已同意退货申请')
                        } else {
                            this.$message.error('出错了！！！')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 拒绝退货
        reject() {
            delete this.agreeOrderBack.returnAmount
            console.log(this.agreeOrderBack)
            let data = {}
            data = this.agreeOrderBack
            data.id = this.order.id

            this.$confirm('确认拒绝该用户的退货申请吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rejectApply(this.order.id, data).then(res => {
                    if (res.success) {
                        this.$message.success('已成功拒绝该用户的退货申请')
                    } else {
                        this.$message.error('出错了！！！')
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消拒绝'
                });
            });
        },
        confirmReceiveGoods() {
            let data = {}
            data = this.receiveGoods
            data.id = this.order.id

            this.$refs.receiveGoods.validate((valid) => {
                if (valid) {
                    receiveProduct(this.order.id, data).then(res => {
                        console.log(res);
                        if (res.success) {
                            this.$message.success('确认收货成功')
                            this.init()
                        } else {
                            this.$message.error('出错了！！！')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 20px;

    .grid-content {
        color: #999;
        border-radius: 4px;
        min-height: 30px;
        line-height: 30px;
        margin-left: 5px;
        text-align: center;
    }

    .grid-content.title {
        font-weight: bolder;

    }

    img {
        width: 120px;
        height: 120px;
    }
}
</style>
